<template>
  <div class="content">
    <div class="dropdown">
      <el-button type="primary" size="mini" @click="insert">{{ $t('btn.save') }}</el-button>
    </div>
    <el-tabs v-model="activeName" class="tabs">
      <el-tab-pane :label="$t('market.info')" name="first">
        <el-form ref="purchaseRef" :model="prodValue" label-width="100px" size="mini">
          <el-form-item :label="$t('market.frombillNo')">
            <el-input v-model="prodValue.ftemplateName">
              <i
                slot="suffix"
                class="el-input__icon el-icon-search"
                @click="isVoucherVisibled = true"
              />
            </el-input>
          </el-form-item>
          <el-form-item :label="$t('market.vouchername')">
            <el-input v-model="prodValue.fname" />
          </el-form-item>
          <el-form-item :label="$t('market.descrip')">
            <el-input v-model="prodValue.fdescription" />
          </el-form-item>
          <el-form-item :label="$t('market.datetype')">
            <el-select v-model="prodValue.fdatetype" filterable>
              <el-option
                v-for="item in datatypeList"
                :key="item.fentryId"
                :label="item.typename"
                :value="item.fentryId"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <el-tabs v-model="activeName1">
      <div style="margin-bottom: 5px">
        <el-button size="mini" @click="newLine">{{ $t('btn.newHang') }}<!--新增行--></el-button>
      </div>
      <!--成品明细-->
      <el-tab-pane :label="$t('market.businessClassify')" class="tabOne" name="first">
        <jc-table
          :table-data="saleDetails"
          :table-header="saleHeader"
          serial
          table-height="200px"
          @rowClick="product"
        >
          <template v-slot:tagSlot="col">
            <el-input
              v-model="col.scope.row.fdescription"
              size="mini"
            >
              <i
                slot="suffix"
                class="el-input__icon el-icon-search"
                @click="desction(col.scope.$index, col.scope.row, 1)"
              />
            </el-input>
          </template>
          <!--  必须生成总账凭  -->
          <template v-slot:btnSlot="col">
            <el-checkbox v-model="col.scope.row.pz" />
          </template>
          <!--操作-->
          <template v-slot:btnStates="col">
            <el-button type="danger" size="mini" @click="deleLine(1, col.scope.$index)">{{ $t('shop.delete') }}</el-button>
          </template>
        </jc-table>
      </el-tab-pane>
    </el-tabs>
    <el-tabs v-model="activeName1">
      <div style="margin-bottom: 5px">
        <el-button size="mini" @click="twoLine">{{ $t('btn.newHang') }}<!--新增行--></el-button>
      </div>
      <!--子件明细-->
      <el-tab-pane :label="$t('market.templateEntries')" class="tabOne" name="first">
        <jc-table
          :table-data="saleDetails[index1].entry"
          :table-header="tableHeader"
          serial
          :table-height="tableHeight"
        >
          <!--  分录类型  -->
          <template v-slot:operaSlot="col">
            <el-input
              v-model="col.scope.row.fsubjectgroup"
              size="mini"
            >
              <i
                slot="suffix"
                class="el-input__icon el-icon-search"
                @click="jouries(col.scope.$index)"
              />
            </el-input>
          </template>
          <!--  科目  -->
          <template v-slot:btnSlot="col">
            <el-input
              v-model="col.scope.row.fdescript"
              size="mini"
            >
              <i
                slot="suffix"
                class="el-input__icon el-icon-search"
                @click="subject(col.scope.$index, col.scope.row, 2)"
              />
            </el-input>
          </template>
          <!-- 借贷方向 -->
          <template v-slot:billSlot="col">
            <el-select v-model="col.scope.row.ftowardtype" size="mini">
              <el-option v-for="item in wardtype" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </template>
          <!--计算公式-->
          <template v-slot:tagSlot="col">
            <el-input
              v-model="col.scope.row.fcalFmoney"
              size="mini"
            >
              <i
                slot="suffix"
                class="el-input__icon el-icon-search"
                @click="rootIn(col.scope.$index, col.scope.row.fcalFmoney, 1)"
              />
            </el-input>
          </template>
          <!--摘要-->
          <template v-slot:btnState="col">
            <el-input
              v-model="col.scope.row.fcalDescription"
              size="mini"
            >
              <i
                slot="suffix"
                class="el-input__icon el-icon-search"
                @click="rootIn(col.scope.$index, col.scope.row.fcalDescription, 2)"
              />
            </el-input>
          </template>
          <!--分录行生成条件-->
          <template v-slot:orderSlot="col">
            <el-input
              v-model="col.scope.row.fdescription"
              size="mini"
            >
              <i
                slot="suffix"
                class="el-input__icon el-icon-search"
                @click="desction(col.scope.$index, col.scope.row, 2)"
              />
            </el-input>
          </template>
          <!--操作-->
          <template v-slot:btnStates="col">
            <el-button type="danger" size="mini" @click="deleLine(2, col.scope.$index)">{{ $t('shop.delete') }}</el-button>
          </template>
        </jc-table>
      </el-tab-pane>
    </el-tabs>
    <!--  来源单据  -->
    <voucher v-if="isVoucherVisibled" @client="tempDate" />
    <!--  分类条件  -->
    <classifyConfig
      v-if="isclassifyVisibled"
      :title="title"
      :ftemp-id="prodValue.ftempId"
      :fdesction="fdesction"
      :msg="calssifySon"
      @classify="classifyData"
    />
    <!--  科目  -->
    <subject v-if="isJectVisibled" :msg="subjectData" :ftemp-id="prodValue.ftempId" @subject="subjectSelect" />
    <!--  金额 摘要使用  -->
    <source1 v-if="isSourceVisibled" :msg="sourceData" :ftemp-id="prodValue.ftempId" @client="sourceSelect" />
    <!--  分录类型  -->
    <jourType v-if="isJouTypeVis" @journ="journSelect" />
  </div>
</template>

<script>
import {
  insertMouldDetails, queryTempDatetypeList, querySubjectGroupInfo, queryMouldDetails
} from '@/api/financial/voucher'
import voucher from '@/views/financial/voucherTemplate/components/voucher'
import classifyConfig from '@/views/financial/voucherTemplate/components/classifyConfig'
import subject from '@/views/financial/voucherTemplate/components/subject'
import source1 from '@/views/financial/voucherTemplate/components/source'
import jourType from '@/views/financial/voucherTemplate/components/jourType'
export default {
  name: 'CreateVoucherTemp',
  components: {
    voucher,
    subject,
    source1,
    jourType,
    classifyConfig
  },
  data() {
    return {
      title: '',
      isVoucherVisibled: false, // 来源单据
      isclassifyVisibled: false, // 分类条件
      isJectVisibled: false, // 科目
      isSourceVisibled: false, // 金额 摘要使用
      isJouTypeVis: false, // 分录类型
      activeName: 'first', // 基本信息
      activeName1: 'first', // 明细信息
      prodValue: {
        ftemplateName: '',
        ftempId: 0,
        fname: '',
        fdatetype: '',
        fdescription: ''
      },
      wardtype: [
        { label: this.$t('market.debtor'), value: 1 },
        { label: this.$t('market.credit'), value: 2 }
      ],
      calssifySon: [], // 业务分类条件设置
      subjectData: [], // 科目
      sourceData: '', // 金额来源 摘要
      moneyDescript: 0,
      fdesction: '',
      // 表单数据
      tableHeight: '250px',
      indexSelf: 0,
      index1: 0,
      datatypeList: [],
      saleDetails: [
        {
          fdescription: '',
          headerTerm: [],
          entry: []
        }
      ],
      saleHeader: [
        { label: this.$t('market.classCondition'), type: 'tag', prop: 'fdescription', width: '1000px' },
        // { label: '必须生成总账凭证', type: 'btn', prop: 'fremark', width: '200px' },
        { label: this.$t('market.handle'), type: 'states', width: '100px' }
      ],
      tableHeader: [
        { label: this.$t('menu.entryType'), type: 'operate', width: '160px' },
        { label: this.$t('market.subject'), type: 'btn', width: '160px' },
        { label: this.$t('market.towardtype'), type: 'bill', prop: 'ftowardtype', width: '160px' },
        { label: this.$t('market.calFmoney'), type: 'tag', prop: 'fcalFmoney', width: '200' },
        { label: this.$t('market.digest'), type: 'state', prop: 'fcalDescription', width: '200px' },
        { label: this.$t('market.hangClassify'), type: 'order', prop: 'fdescription', width: '140px' },
        { label: this.$t('market.handle'), type: 'states', width: '90px' }
      ]
    }
  },
  created() {
    if (this.$route.params.id) {
      this.voucherTemp()
    }
    this.tableHeight = window.innerWidth > 1440 ? 'calc(100vh - 500px)' : '400px'
  },
  methods: {
    // 详情
    async voucherTemp() {
      const id = this.$route.params.id
      const { data: RES } = await queryMouldDetails({ fmouldId: id })
      this.prodValue = RES
      this.saleDetails = RES.header
      this.prodValue.ftemplateName = ''
      this.prodValue.ftempId = ''
      this.prodValue.fdatetype = ''
    },
    // 新增凭证模板订单
    async insert() {
      const DATA = this.prodValue
      this.prodValue.header = this.saleDetails
      await insertMouldDetails(DATA).then(res => {
        if (res.code === 0) {
          this.$store.dispatch('tagsView/guanbi', this.$route)
          this.$router.push({ path: `/voucherTempDetail/${res.data.fmouldId}` })
          this.$message({ showClose: true, message: res.message, type: 'success' })
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 来源单据
    tempDate(ev) {
      if (ev.ftempId) {
        this.prodValue.ftemplateName = ev.fname
        this.prodValue.ftempId = ev.ftempId
        this.datatype(ev.ftempId)
      }
      this.isVoucherVisibled = false
    },
    // 时间类型
    datatype(ev) {
      queryTempDatetypeList({ ftempId: ev }).then(res => {
        if (res.code === 0) {
          this.datatypeList = res.data.list
        }
      })
    },
    // 分类条件
    desction(index, item, ev) {
      if (!this.prodValue.ftempId) {
        this.$message({ showClose: true, message: '请先选择来源单据！', type: 'warning' })
        return
      }
      if (ev === 1) { // 业务分类
        this.calssifySon = item.headerTerm
        this.title = this.$t('market.clasCondition') // '业务分类条件设置'
      } else if (ev === 2) { // 模板分录
        this.calssifySon = item.entryTerm
        this.title = this.$t('market.entryLine') // ''分录行条件设置'
      }
      this.fdesction = item.fdescription
      this.indexSelf = index
      this.isclassifyVisibled = true
    },
    // 分类配置
    classifyData(ev, en) {
      if (ev && this.title === this.$t('market.clasCondition')) { // '业务分类条件设置'
        const item = this.saleDetails[this.indexSelf]
        item.fdescription = ev
        item.headerTerm = en
      } else if (ev && this.title === this.$t('market.entryLine')) { // ''分录行条件设置'
        const item = this.saleDetails[this.index1].entry[this.indexSelf]
        item.fdescription = ev
        item.entryTerm = en
      }
      this.isclassifyVisibled = false
    },
    // 科目
    subject(index, item) {
      this.indexSelf = index
      this.subjectData = item.entryDetail
      this.isJectVisibled = true
    },
    // // 科目数据
    subjectSelect(en, ev) {
      if (en) {
        const item = this.saleDetails[this.index1].entry[this.indexSelf]
        item.entryDetail = en
        item.fdescript = ev.join('/')
      }
      this.isJectVisibled = false
    },
    // 分录类型
    jouries(index) {
      this.indexSelf = index
      this.isJouTypeVis = true
    },
    // 获取分录类型
    journSelect(ev) {
      if (ev.fgroupId) {
        const item = this.saleDetails[this.index1].entry[this.indexSelf]
        item.fsubjectgroup = ev.fname
        item.fsubjectgroupId = ev.fgroupId
        this.sujDa(ev.fgroupId)
      }
      this.isJouTypeVis = false
    },
    // 向科目取值push分录详情的值
    sujDa(ev) {
      querySubjectGroupInfo({ fgroupId: ev }).then(res => {
        if (res.code === 0) {
          const item = this.saleDetails[this.index1].entry[this.indexSelf]
          res.data.list.forEach(ite => {
            item.entryDetail.push({
              fdescription: '',
              fsubjectId: ite.fsubjectId,
              fsubject: ite.fsubjectName,
              fseq: 1,
              entryDetailTerm: []
            })
          })
        }
      })
    },
    // 金额来源 摘要设置
    rootIn(index, item, ev) {
      this.moneyDescript = ev
      this.indexSelf = index
      if (ev === 1) { // 本位币金额来源
        this.title = this.$t('market.amountSource') // '金额来源设置'
        this.sourceData = item
      } else { // 摘要
        this.title = this.$t('market.summarySet') // '摘要设置'
        this.sourceData = item
      }
      this.isSourceVisibled = true
    },
    // 获取 金额来源 摘要设置 数据u
    sourceSelect(ev) {
      const item = this.saleDetails[this.index1].entry[this.indexSelf]
      if (this.moneyDescript === 1 && ev) {
        item.fcalFmoney = ev
      } else if (this.moneyDescript === 2 && ev) {
        item.fcalDescription = ev
      }
      this.isSourceVisibled = false
    },
    // 点击成品明细
    product(row) {
      this.index1 = row.index
    },
    // 删除行
    deleLine(ev, index) {
      if (ev === 1) {
        this.saleDetails[index].entry = []
        this.saleDetails.splice(index, 1)
      } else {
        this.saleDetails[this.index1].entry.splice(index, 1)
      }
    },
    // 新增行
    newLine() {
      this.saleDetails.push({
        fdescription: '',
        headerTerm: [],
        entry: []
      })
    },
    twoLine() {
      this.saleDetails[this.index1].entry.push({
        fsubjectgroup: '',
        ftowardtype: 1,
        fcalFmoney: '',
        fcalDescription: '',
        fdescription: '',
        fdescript: '',
        entryDetail: [],
        entryTerm: []
      })
    }
  }
}
</script>
<style scoped lang="scss">
.content {
  @include listBom;
  .el-tabs {
    &::v-deep.el-tabs__header {
      margin: 0 0 5px;
    }
    .el-table{
      &::v-deep .el-input-number .el-input__inner{
        padding: 0 5px;
        width: 80px;
      }
      &::v-deep .el-input-number .el-input{
        width: 80px;
      }
      &::v-deep .el-input-number--mini{
        width: 80px;
      }
      &::v-deep .el-input-number__increase{
        display: none;
      }
      &::v-deep .el-input-number__decrease{
        display: none;
      }
      &::v-deep .el-table__footer-wrapper tbody td{
        background: #fdf6ec!important;
      }
      &::v-deep .el-input--prefix .el-input__inner {
        width: 130px;
      }
      &::v-deep .el-date-editor.el-input{
        width: 130px!important;
      }
    }
    .el-input::v-deep .el-input__inner {
      height: 30px;
      line-height: 30px;
    }
    .el-form {
      display: flex;
      flex-wrap: wrap;

      .el-form-item {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        //height: 35px;
        width: 275px;
        margin-bottom: 0;
        .btnType{
          margin-right: 20px;
        }
        .el-date-editor.el-input{
          width: 100% !important;
        }
        .el-select{
          width: 100%;
        }
      }
    }
  }
}

.el-input__icon {
  cursor: pointer;
}

</style>
